<template>
    <div style="width: 100%; height: 100%;" id="top_registration"></div>
</template>

<script>
import * as echarts from 'echarts';
const returnName = (name => {
  const len = name.length
  if(len > 7 && len <= 14){
    return name.substring(0, 7) + '\n' +name.substring(7, 14)
  }else if(len > 14){
    return name.substring(0, 7) + '\n' +name.substring(7, 14) + '...'
  }else{
    return name
  }
})
const option = {
  title: {
    text: '开售登记TOP5（在售）',
    textStyle: {
      fontSize: 15
    },
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    top: '10%',
    left: '0%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    axisLabel: {
      textStyle: {
        fontSize: 12
      }
    },
    data: []
  },
  series: [
    {
      name: '登记数',
      type: 'bar',
      itemStyle: {
          normal: {
              //这里是颜色
              color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#00A3E0','#FFA100', '#ffc0cb', '#BBFFAA','#749f83', '#ca8622'];
                  return colorList[params.dataIndex]
              }
          }
      },
      data: []
    }
  ]
};
export default {
    name: 'topRegistration',
    props: {
        datas: {
            type: Array,
            default: function() {
                return [];
            }
        }
    },
    data() {
        return {
            chart: null
        }
    },
    watch: {
        datas: {
            deep: true,
            handler() {
                this.init();
            }
        }
    },
    mounted () {
        this.chart = echarts.init(document.getElementById('top_registration'));
        this.init();
        window.addEventListener('resize', () => {
            this.chart.resize();
        });
    },
    methods: {
        init() {
            let yData = [];
            let xData = [];
            this.datas.forEach(item => {
                yData.push(returnName(item.project_name));
                xData.push(item.count);
            })
            option.yAxis.data = yData;
            option.series[0].data = xData;

            this.chart.setOption(option);
        }
    }
};
</script>